<template>
  <div class="table-card card">
    <div class="table-title">怪物弱点</div>
    <div class="table-subtitle">
      <div class="tips">
        <span class="notice">说明:</span>
        <etag num="1"/> <i class="fa fa-angle-right" aria-hidden="true"></i>
        <etag num="2" /> <i class="fa fa-angle-right" aria-hidden="true"></i>
        <etag num="3"/> <i class="fa fa-angle-right" aria-hidden="true"></i>
        <etag num="4"/> <i class="fa fa-angle-right" aria-hidden="true"></i>
        <etag num="5"/>
        &nbsp;&nbsp;有效伤害，左到右递减
      </div>
    </div>
    <div class="table-container">
      <wid-table :headers="headers" :data="info.weakData" :widths="widths" :type="type"/>
    </div>

    <!-- 状态异常和道具效果 -->
    <div class="table-title">状态异常和道具效果</div>
    <div class="table-container">
      <wid-table :headers="spHeaders" :data="info.spData" :widths="spWidths" :type="spType"/>
    </div>
    <!-- 具体数值 -->
    <div class="table-title">具体数值</div>
    <div class="table-subtitle">
      状态异常耐性
    </div>
    <div class="table-container">
      <wid-table :headers="spDescHeaders" :data="info.spDescData" :widths="spDescWidths" :type="spDescType"/>
    </div>
    <div class="table-subtitle">
      道具效果
    </div>
    <div class="table-container">
      <wid-table :headers="itemHeaders" :data="info.itemData" :widths="itemWidths" :type="itemType"/>
    </div>
    <!--肉质伤害计算-->
    <div class="table-title">
      肉质伤害计算
    </div>
    <div class="table-subtitle">
      <div class="tips">
        提示: 括号内数据为部分破坏后计算值
      </div>
    </div>
    <div class="table-container">
      <wid-table :headers="hurtHeaders" :data="info.hurtData" :widths="hurtWidths" :type="hurtType"/>
    </div>
    <!-- 耐性 -->
    <div class="table-title">
      耐久值
    </div>
    <div class="table-container">
      <wid-table :headers="tolHeaders" :data="info.tolData" :widths="tolWidths" :type="tolType"/>
    </div>
  </div>
</template>
<script>
import {get} from '@/util'
import etag from '@/components/Etag'
import WidTable from '@/components/WidTable'
export default {
  props: [
    'id'
  ],
  components: {
    etag,
    WidTable
  },
  data () {
    return {
      info: {
        weakData: [
          []
        ],
        spData: [
          []
        ],
        itemData: [
          []
        ],
        hurtData: [
          []
        ]
      },
      headers: ['状态', '斩', '打', '弹', '火', '水', '雷', '冰', '龙'],
      widths: [
        '9%', '17%', '17%', '17%', '8%', '8%', '8%', '8%', '8%'
      ],
      type: [
        0, 3, 3, 3, 1, 1, 1, 1, 1
      ],
      spHeaders: ['毒', '睡眠', '麻痺', '爆破', '気絶', '痺れ罠', '落し穴', '閃光玉'],
      spWidths: [
        '12.5%', '12.5%', '12.5%', '12.5%', '12.5%', '12.5%', '12.5%', '12.5%', '12.5%'
      ],
      spType: [
        1, 1, 1, 1, 1, 1, 1, 1, 1
      ],
      spDescHeaders: ['种类', '初期耐性', '最大耐性', '效果时长'],
      spDescWidths: [
        '25%', '25%', '25%', '25%'
      ],
      spDescType: [
        0, 1, 1, 1
      ],
      itemHeaders: ['道具', '效果', '最小'],
      itemWidths: [
        '33.3333%', '33.3333%', '33.3333%'
      ],
      itemType: [
        0, 0, 0
      ],
      hurtHeaders: ['部位', '切', '打', '弹', '火', '水', '雷', '冰', '龙', '气绝'],
      hurtWidths: [
        '10%', '10%', '10%', '10%', '10%', '10%', '10%', '10%', '10%', '10%'
      ],
      hurtType: [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0
      ],
      tolHeaders: ['部位', '耐久值', '图示'],
      tolWidths: [
        '33.3333%', '33.3333%', '33.3333%'
      ],
      tolType: [
        0, 0, 1
      ]
    }
  },
  methods: {
    async getData (mid) {
      const infoData = await get('/weapp/tabbase', {id: mid})
      this.info = infoData
    }
  },
  mounted () {
    this.getData(this.id)
  }
}
</script>
<style>

</style>
